<template>
  <div>
    <div class="baseform divread">
      <el-form :label-position="labelPosition" label-width="80px" :model="from">
            <div class="title"><h3>基本信息</h3></div>
            <el-row :gutter="20" style="padding-top: 15px">
              <el-col :span="12">
                <el-form-item label="流水号" prop="organId">
                  <span>---</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="投诉日期" prop="complainTime">
                  <el-date-picker
                  v-model="from.complainTime"
                  type="date"
                  value-format="timestamp"
                  placeholder="选择日期"
                  style="width:100%"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="投诉来源" prop="caseTypeId">
                  <el-select v-model="from.complainSource"  placeholder style="width: 100%">
                    <el-option
                            v-for="item in complaintlist"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="行业" prop="registerPlatform">
                  <el-select v-model="from.industry" placeholder style="width: 100%">
                    <el-option
                            v-for="item in cartypelist"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="状态" prop="status">
                <el-input v-model="from.status" placeholder="待处理" :readonly="edit"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        <div>
          <div class="title"><h3>投诉人信息</h3></div>
          <el-row :gutter="20" style="padding-top: 15px;">
            <el-col class="col-md-4" :span="12">
              <el-form-item label="投诉人" prop="complianPerson">
                <el-input v-model="from.complianPerson" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话" prop="complainTel">
                <el-input v-model="from.complainTel" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="联系地址" prop="complainAddress">
                <el-input v-model="from.complainAddress" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div>
            <div class="title"><h3>投诉内容</h3></div>
            <div style="padding:0 5px">
              <h5>投诉基本信息</h5>
                  <el-row :gutter="20">
                    <el-col :span="12">
                      <el-form-item label="发生时间" prop="occurTime">
                        <el-date-picker
                                v-model="from.occurTime"
                                type="date"
                                value-format="timestamp"
                                placeholder="选择日期"
                                style="width:100%"
                        ></el-date-picker>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="发生地点" prop="occurAddress">
                        <el-input v-model="from.occurAddress" placeholder="请输入"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
            </div>
        </div>
        <div style="padding:0 5px">
          <h5>车辆信息</h5>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="车牌号" prop="carNo">
                <el-input v-model="from.carNo" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属企业" prop="carIndustry">
                <el-input v-model="from.carIndustry" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="立户号" prop="carNum">
                <el-input v-model="from.carNum" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车辆类型" prop="carType">
                <el-input v-model="from.carType" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="车型" prop="carStyle">
                <el-input v-model="from.carStyle" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属区县" prop="carAddress">
                <el-input v-model="from.carAddress" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="公司电话" prop="carTel">
                <el-input v-model="from.carTel" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车身颜色" prop="carColor">
                <el-input v-model="from.carColor" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="车身辅色" prop="carColor2">
                <el-input v-model="from.carColor2" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div style="padding:0 5px">
          <h5>驾驶员信息</h5>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="驾驶员驾驶证" prop="driverNo">
                <el-input v-model="from.driverNo" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="驾驶员姓名" prop="driverName">
                <el-input v-model="from.driverName" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="所属企业" prop="driverIndustry">
                <el-input v-model="from.driverIndustry" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属区县： " prop="driverAddress">
                <el-input v-model="from.driverAddress" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="立户号" prop="driverNum">
                <el-input v-model="from.driverNum" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div style="padding:0 5px">
          <h5>投诉事项</h5>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="投诉事项" prop="caseFacts">
                <!-- <el-input v-model="from.illegallaw"></el-input> -->
                <el-input
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 12}"
                        placeholder="请输入内容"
                        v-model="from.complainNote"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="投诉人诉求" prop="complainRequire">
                <!-- <el-input v-model="from.illegallaw"></el-input> -->
                <el-input
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 12}"
                        placeholder="请输入内容"
                        v-model="from.complainRequire"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
  import dictCache from "@/assets/utils/cache-dict-util";
  import FormBtns from "@/views/comps/zhzf/form-btns";
  import caseApi from "@/api/system/case";
  import lawuserApi from "@/api/system/lawuser";
  import deptApi from "@/api/system/dept";
  import TreeSelect from "../../comps/zhzf/tree-select";
  // import breakInfo from "./break-info";
  import {mapActions} from "vuex";

  export default {
    components: {FormBtns, TreeSelect},
    props: {
      edit: {
        required: true,
        default: false
      },
    },

    data() {
      return {
        labelPosition: "right",
        typelist: {
          t3: "3"
        },
        treeList: [],
        cartypelist:[],
        complaintlist:[],
        from: {}
      };
    },
    methods: {
      ...mapActions("d2admin/page", ["close"]),
      async initPage(detail, distData) {
        this.from = detail;
        this.complaintlist = distData.complaintlist;
        this.cartypelist = distData.cartypelist;
        this.from.staffstr = this.stafflistTostr(detail.statffs);
        this.treeList = distData.treeList;
        if (this.from.organId) {
          let dept = {id: this.from.organId, name: this.from.organName};
          this.$refs.treeSelect.setValue(dept);
          this.changeParent(dept);
        }
        // this.setDefaultData();
        if (this.from.zfml) {
          // this.changeZfml();
        }
      },
      changeZfml() {
        let zfml = dictCache.getDataInfo("0055", this.from.zfml);
        this.from.zfmlName = zfml.name;
        this.$emit("changezfml");
      },
      showDetail(type) {
        // this.$refs.breakInfo.initPage(type, this.from);
      },
      async getbreakdata(data) {
        if (!data) {
          utils.showTips("请选择数据");
          return;
        } else {
          let stafflist = data;
          this.from.statffs = [];
          for (var i = 0; i < stafflist.length; i++) {
            let obj = {};
            let item = stafflist[i];
            obj.username = item.username;
            obj.userId = item.id;
            obj.realName = item.realname;
            obj.cardNo = item.orgCode || "12";
            obj.caseId = item.enabled || "34";
            obj.caseStaffId = item.operateType || "56";
            this.from.statffs.push(obj);
          }
          this.from.staffstr = this.stafflistTostr();
          this.$forceUpdate();
        }
      },
      stafflistTostr() {
        let userText = [];
        if (this.from.statffs) {
          this.from.statffs.forEach(item => {
            userText.push(item.username);
          });
        }
        return userText.join(",");
      },
      async staffList() {
        let res1 = await lawuserApi.stafflist();
      },
      setDefaultData() {
        if (!this.from.caseTypeId) {
          this.from.caseTypeId = Object.values(this.typeList)[0].id;
        }
        if (!this.from.casestatus) {
          this.from.casestatus = "未立案";
        }
        if(!this.from.caseType){
          this.from.caseType = Object.values(this.casetypelist)[0].id;
        }
      },
      async changeParent(item) {
        this.from.fillingPlace = item.address;
        this.from.organId = item.id;
        this.from.organName = item.name;
        if (!item.address) {
          let res = await deptApi.info({id: this.from.organId});
          this.from.fillingPlace = res.data.address;
        }
        this.$forceUpdate();
      }
    }
  };
</script>
<style lang="scss">
  .baseform {
    padding: 0px 20%;
  }
  .el-date-editor {
    .el-input__suffix {
      display: none;
    }
  }
</style>
